<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>泉城投票</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/vote/unregister/frozen.css">
    <link rel="stylesheet" href="/css/vote/unregister/vote.css">
    <script src="/js/admin/jquery.min.js" type="text/javascript"></script>
    <script src="/js/dependencies/layer/layer.js"></script>
    <style>
        .voteListCon li .voteNumWrap{
            height:1.2rem;
            line-height:1.2rem;
        }
        .voteNum{
            margin-left:5px;
            background-color:#501e1e;
            border-radius:10px;
            padding:2px 5px;
        }
    </style>
    <script>
        //ajax 请求回来或后台给的数据
        var data = {
            time :{{$time}},//抢红包时间
            bgSrc:'{{$background}}'
        }
        if (!data['bgSrc']){
            data['bgSrc'] = '/app/{{$activity_template}}/img/bg.jpg';
        }
    </script>
</head>
<body>
<div id="main" style="background-image:url('{{ isset($backgroundImg) ? $backgroundImg : '/images/vote/unregister/wen.png' }}');">
    <div class="ui-whitespace header">
        <h1 class="center ">{{ isset($name) ? $name : '“XX”杯' }}</h1>
        <div class="mt25">
				<span class="hTitle">
					投票时间:
				</span>
            <span>
					{{ $startTime or '2017.05.01' }} ~ {{ $endTime or '2017.06.01' }}
				</span>
        </div>
        <div class="flex rule">
				<span class="hTitle">
					投票规则:
				</span>
            <div class="">
                <p>
                    {{ isset($ruleDescription) ? $ruleDescription : '用户还可通过分享获取额外的投票机会，每日上限10票' }} <a href="rule.html" class="more">【详细】</a>
                </p>
            </div>

        </div>
    </div>
    <div class="ui-whitespace">
        <ul class="ui-row-flex voteTab mt25">
            <li class="ui-col ui-flex ui-flex-pack-center cur"><div>投票</div></li>
            <li class="ui-col ui-flex ui-flex-pack-center"><div>检索</div></li>
            <li class="ui-col ui-flex ui-flex-pack-center"><div>排行</div></li>
        </ul>
        <!-- 投票  S-->
        <div class="tabList">
            <div class="voteList voteListVideo mt30">
                <h3>视频类 <span>Video</span></h3>
                <div>
                    <ul class="ui-justify  voteListCon  mt20 ml_4 mr_2">
                        <!-- 如果有背景图片请在下面的.production 元素上加上hasImg类
                             用于视频和音频
                             以便和没有图是显示不同的播放按钮图标
                        -->
                        <li class="ui-col-30 pdlr_1">
                            <div class="production videoCon hasImg " style="background-image:url('img/demo.JPG');"> </div>
                            <p>1号作品 “绿地泉”“绿地泉”“绿地泉”“绿地泉”“绿地泉”“绿地泉”</p>
                            <p class="voteNumWrap">票数<span class="voteNum">1111</span></p>
                            <a href="v_detail.html">投票</a>
                        </li>
                        <li class="ui-col-30 pdlr_1">
                            <div class="production videoCon hasImg" style="background-image:url('img/demo1.PNG');"> </div>
                            <p>2号作品</p>
                            <p class="voteNumWrap">票数<span class="voteNum">1111</span></p>
                            <a href="v_detail.html">投票</a>
                        </li>
                        <!--<li class="ui-col-30">-->
                        <!-- 最后遍历不足3个请用此空的li标签补足3个 -->
                        <!--</li>-->
                    </ul>
                </div>
            </div>
            <div class="voteList voteListPic mt30" >
                <h3>平面类 <span>Graphic design</span></h3>
                <div>
                    <ul class="ui-justify  voteListCon  mt20 ml_4 mr_2">
                        <li class="ui-col-30 pdlr_1">
                            <div class="production picCon hasImg"  style="background-image:url('img/demo.JPG');"> </div>
                            <p>1号作品 “绿地泉”“绿地泉”“绿地泉”“绿地泉”“绿地泉”“绿地泉”</p>
                            <p class="voteNumWrap">票数<span class="voteNum">1111</span></p>
                            <a href="p_detail.html">投票</a>
                        </li>
                        <li class="ui-col-30 pdlr_1">
                            <div class="production picCon"> </div>
                            <p>2号作品</p>
                            <p class="voteNumWrap">票数<span class="voteNum">1111</span></p>
                            <a href="p_detail.html">投票</a>
                        </li>

                        <!--<li class="ui-col-30">-->
                        <!-- 最后遍历不足3个请用此空的li标签补足3个 -->
                        <!--</li>-->

                    </ul>
                </div>
            </div>
            <div class="voteList voteListAudio mt30">
                <h3>音频类 <span>Audio</span></h3>
                <div>
                    <ul class="ui-justify  voteListCon  mt20 ml_4 mr_2">
                        <li class="ui-col-30 pdlr_1">
                            <div class="production audioCon hasImg" style="background-image:url('img/demo1.PNG');"> </div>
                            <p>1号作品 “绿地泉”“绿地泉”“绿地泉”“绿地泉”“绿地泉”“绿地泉”</p>
                            <p class="voteNumWrap">票数<span class="voteNum">1111</span></p>
                            <a href="a_detail.html">投票</a>
                        </li>
                        <li class="ui-col-30 pdlr_1">
                            <div class="production audioCon"> </div>
                            <p>2号作品</p>
                            <p class="voteNumWrap">票数<span class="voteNum">1111</span></p>
                            <a href="a_detail.html">投票</a>
                        </li>

                        <!--<li class="ui-col-30">-->
                        <!-- 最后遍历不足3个请用此空的li标签补足3个 -->
                        <!--</li>-->
                    </ul>
                </div>
            </div>
        </div><!-- 投票  E-->
        <!-- 检索  S-->
        <div class="tabList pb30" style="display:none;">
            <div class="search mt20">
                <input type="text" class="searchInput">
                <span class="searchBtn">搜索</span>
            </div>
            <ul class="ui-list ui-list-link">
                <li >
                    <div class="ui-list-img videoCon hasImg" style="background-image:url('img/demo1.PNG');">
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p class="ui-nowrap-multi">这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断</p>
                        <div class="state">
                            <span class="ranking">排名：1</span>
                            <span class="votes">6666票</span>
                        </div>
                    </div>
                </li>
                <li >
                    <div class="ui-list-img picCon hasImg" style="background-image:url('img/demo1.PNG');">
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p class="ui-nowrap-multi">这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断</p>
                        <div class="state">
                            <span class="ranking">排名：2</span>
                            <span class="votes">6666票</span>
                        </div>
                    </div>
                </li>
                <li >
                    <div class="ui-list-img audioCon" style="background-image:url('img/demo1.PNG');">
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p class="ui-nowrap-multi">这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断</p>
                        <div class="state">
                            <span class="ranking">排名：3</span>
                            <span class="votes">6666票</span>
                        </div>
                    </div>
                </li>
                <li >
                    <div class="ui-list-img" style="background-image:url('img/demo.JPG');">
                        <i></i>
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p class="ui-nowrap-multi">这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断</p>
                        <div class="state">
                            <span class="ranking">排名：1</span>
                            <span class="votes">6666票</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div><!-- 检索 E-->
        <!-- 排行  S-->
        <div class="tabList pb30" style="display:none;" >
            <ul class="ui-list ui-list-link">
                <li >
                    <div class="ui-list-img videoCon hasImg" style="background-image:url('img/demo1.PNG');">
                        <i class="jin"></i>
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p class="ui-nowrap-multi">这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断</p>
                        <div class="state">
                            <span class="ranking">排名：1</span>
                            <span class="votes">6666票</span>
                        </div>
                    </div>
                </li>
                <li >
                    <div class="ui-list-img picCon hasImg" style="background-image:url('img/demo1.PNG');">
                        <i class="yin"></i>
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p class="ui-nowrap-multi">这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断</p>
                        <div class="state">
                            <span class="ranking">排名：2</span>
                            <span class="votes">6666票</span>
                        </div>
                    </div>
                </li>
                <li >
                    <div class="ui-list-img audioCon" style="background-image:url('img/demo1.PNG');">
                        <i class="tong"></i>
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p class="ui-nowrap-multi">这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断</p>
                        <div class="state">
                            <span class="ranking">排名：3</span>
                            <span class="votes">6666票</span>
                        </div>
                    </div>
                </li>
                <li >
                    <div class="ui-list-img" style="background-image:url('img/demo.JPG');">
                        <i></i>
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p class="ui-nowrap-multi">这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断这是内容，加ui-nowrap可以超出长度截断</p>
                        <div class="state">
                            <span class="ranking">排名：1</span>
                            <span class="votes">6666票</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div><!-- 排行  E-->

    </div>
</div>
<script>
    //IOS中激活a标签active事件
    var a = document.getElementsByTagName('a');
    for(var i = 0; i < a.length; i++)
    {
        a[i].addEventListener('touchstart',function(){},false);
    }
    document.body.addEventListener('touchstart', function () { });

//    $('.voteTab li').click(function(){
//        var index = $(this).index();
//        $(this).addClass('cur').siblings('li').removeClass('cur');
//        var votesucess = layer.msg('投票成功！');
//        $('.tabList').hide().eq(index).show();
//        //此处用来关闭提示
//        layer.close(votesucess);
//    })

</script>
</body>
</html>